import React, { Component } from 'react';
import { Row, Form, Input, Button, FormInstance, message } from 'antd';
import styles from './index.less';
import { history } from '@/.umi/core/history';
import CustomInputNumber from '@/components/custom_input_number';
import SendSmsButton from '@/components/send_sms_btn';
import { userStore } from '@/stores/user';
import { observer } from 'mobx-react';
import { RuleUtils } from 'xo-web-base';
@observer
export default class ForgetPwd extends Component<any, any> {
  form = React.createRef<FormInstance>();
  onFinish = async (values: any) => {
    const { mobile, code, password } = values;
    const result = await userStore.forgetPwd(code, mobile, password);
    if (result) {
      message.success('重置密码成功');
      history.push({
        pathname: './login',
        state: { mobile: mobile, password: password },
      });
    }
  };
  goLoginPage = () => {
    history.push('./login');
  };
  render() {
    const { mobile } = this.props.location?.state;
    return (
      <div>
        <Row justify="space-between">
          <Row className={styles.title_wrap}>
            <div className={styles.title}>重置密码</div>
            <div className={styles.border}></div>
          </Row>
          <div onClick={this.goLoginPage} className={styles.right_wrap}>
            返回去登录
          </div>
        </Row>
        <Form
          name="normal_login"
          className={styles.login_form}
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
          ref={this.form}
        >
          <Form.Item
            name="mobile"
            rules={RuleUtils.mobileRules}
            initialValue={mobile}
          >
            <CustomInputNumber placeholder="请输入手机号" maxLength={11} />
          </Form.Item>
          <Row>
            <Form.Item
              name="code"
              className={styles.code_input}
              rules={RuleUtils.codeRules}
            >
              <CustomInputNumber maxLength={6} placeholder="请输入验证码" />
            </Form.Item>
            <SendSmsButton
              mobile={() => this.form?.current?.getFieldValue('mobile')}
              sendType={2}
            />
          </Row>
          <Form.Item name="password" rules={RuleUtils.pwdRules}>
            <Input.Password placeholder="请输入密码" maxLength={16} />
          </Form.Item>
          <Form.Item name="require_password" rules={RuleUtils.pwdConfirmRules}>
            <Input.Password placeholder="请再次输入密码" maxLength={16} />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={styles.register_form_button}
            >
              重置密码
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
